<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	<style>
	        *{
	            margin: 0px;
	            padding: 0px;
	            list-style: none;
	        }
	        textarea{
	            width: 800px;
	            resize: none;
	            margin: 0px auto;
	            display: block;
	            outline: none;
	        }
	        ul{
	            width: 800px;
	            margin: 0px auto;
	        }
	        li{
	            margin: 20px 0px;
	            border: 1px solid red;
	            position: relative;
	            padding:20px;
	        }
	        .del{
	            position: absolute;
	            right: 10px;
	            top: 50px;
	            cursor: pointer;
	        }
			.del2{
	            position: absolute;
	            right: 50px;
	            top: 50px;
	            cursor: pointer;
	        }
	        button{
	            width:800px;
	            background: #f60;
	            border:none;
	            outline:none;
	            display: block;
	            margin: 20px auto;
	            line-height:40px;
	            color:white;
	            cursor: pointer;
	
	        }
			#box input{
				width: 150px;
				border: none;
				outline: none;
				text-align: center;
			}
	    </style>
	</head>
	<body>
	    <textarea name="" id="txt" cols="30" rows="10"></textarea>
	    <button id="btn">发送</button>
	    <ul id="box">
	        <li>
				<input type="text" value="学习,xxxxx">
	            <p>2021-05-31</p>
	            <span class="del" onclick="del(this)">删除</span>
				<span onclick="del2(this)" class="del2">编辑</span>
	        </li>
	        <li>
	            <input type="text" value="今天儿童节，xxx">
	            <p>2021-06-01</p>
	            <span class="del" onclick="del(this)">删除</span>
				<span onclick="del2(this)" class="del2">编辑</span>
	        </li>
	    </ul>
	</body>
	    <script>
	        var btn=document.getElementById('btn');
	        var txt=document.getElementById('txt');
	        var box=document.getElementById('box');
	        btn.onclick=function(){
	            var year=new Date().getFullYear();
	            var month=new Date().getMonth()+1;
	            var date=new Date().getDate();
	            function isEmpty(txt){
	                return (typeof txt === 'undefined' || txt === null || txt === "");
	                }
	                function isEmpty(btn){
	                if(btn != null && trim(btn).length > 0){
	                    return false;
	                }
	                return true;
	        }
				if(txt.value==''){
				alert("内容不能为空");
					}else{
	            var val=txt.value;
	            var tag=document.createElement('li');
	            tag.innerHTML=`<input type="text" value="${val}">
	            <p>${year}-${month}-${date}</p>
	            <span class="del" onclick="del(this)">删除</span>
				<span onclick="del2(this)" class="del2">编辑</span>`;
				
	            box.appendChild(tag);
				}
	        }
	        function del(a){
	            a.parentNode.parentNode.removeChild(a.parentNode)
	        }
			 function del2(a){
					var val=a.parentNode.children[0].children[0];
				 if(a.innerHTML=='编辑'){
				     a.innerHTML='确认';
				     val.removeAttribute('disabled');
				 }else{
				     a.innerHTML='编辑';
				     val.disabled='true';
				 }
				                 
			 }
	    </script>
	</html>